<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>each-基础循环的使用方法</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- css file  -->
    <!-- <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> -->


    <!-- js file -->
    <script type="text/javascript" src="../script/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="../script/handlebars-v4.0.12.js"></script>
</head>
<body>
    <h1>each-基础循环的使用方法</h1>
    <!-- 基础HTML框架 -->
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody id="tableList">

        </tbody>
    </table>

    

    <!-- 插件引用 -->
    <!-- Handlebars.js 模板 -->
    <!-- Handlebars.js模板放在script标签中，保留了HTML原有层次结构，模板要写一些操作语句，id可以用来唯一确认一个模板，type是模板固有的写法 -->
    <script type="text/x-handlebars-template" id="table-template">
        {{#each student}}
            <tr>
                <td>{{name}}</td>
                <td>{{sex}}</td>
                <td>{{age}}</td>
            </tr>
        {{/each}}
    </script>

    <!-- 进行参数处理，HTML构造 -->
    <script type="text/javascript">
        $(function(){
            //  模拟json对象
            var data = {
                "student": [
                    {
                        "sex": "男",
                        "age": 28
                    },
                    {
                        "name": "李四",
                        "sex": "女",
                        "age": 32
                    }
                ]
            };
            // 注册一个handlebar模板，通过id找到某一个模板，获取模板的HTML框架
            // $('#table-template').html()
            var temHtml = $('#table-template').html(),
                myTemplate = Handlebars.compile(temHtml);
            //  将json对象用刚刚注册得到的handlebars模板封装，得到最终的HTML，插入到基础的data中
            $('#tableList').html(myTemplate(data));
        })
    </script>

</body>
</html>